import './index.scss'
// import { Tabs } from 'antd-mobile'
import { Swiper, Image, Collapse, DotLoading  } from 'antd-mobile'
import { MinusOutline, AddOutline } from 'antd-mobile-icons'
import { useProduct } from './usePro'
// import GeneralCard from '@/components/GeneralCard'
import Form from '@/components/Form'
import Bread from '@/components/Bread'
import FormButton from './FormButton'

type Item  = 
{
    id?: number;
    title?: string;
    link:string;
    classname?: string
}
const Product = () => {
    // 逻辑业务
    const { isLoading, imgs, isopenArr, relateProducts } = useProduct()
    // 数据判断
    // if (!imgs.length) {
    //   return <DotLoading />
    // }
    const breadNav: Item[] = [
      { id: 1, title: 'Product', link: '/product', classname: '' },
      { id: 2, title: imgs?.category2_name, link: `/product/${imgs?.category2}`, classname: '' },
      { id: 3, title: imgs?.category3_name, link: `/product/list/${imgs?.category3}`, classname: '' },
      { id: 4, title: imgs?.title, link: `/product/detail/${imgs?.id}`, classname: 'active' },
    ]
    // UI 渲染
    return (
      
      <div className='container'>
        {isLoading ? <div className='content-box'><span>Loading</span><DotLoading /></div>: (
          <div>
            <div className='content-box'>
              <Bread items={breadNav}/>
              <div >
                {/* 1.图片 */}
                <div className='img-box'>
                  <Swiper autoplay slideSize={100}>
                    {imgs.images?.split(',').map((item,index) => (
                        <Swiper.Item key={index}>
                          <Image lazy src={item} alt={`${index}`}  fit='cover' className='img' />
                        </Swiper.Item>
                        ))}
                  </Swiper>
                </div>
                {/* 2.文案 */}
                <div className='Product-text'>
                  <h1>{imgs.title}</h1>
                  {imgs?.abstracts && (<div dangerouslySetInnerHTML={{ __html: imgs?.abstracts }} />)}
                </div>
                {/* 表单 */}
                <FormButton />
                {/* 3.规格 */}
                <div className='Product-spec'>
                  <Collapse
                    defaultActiveKey={isopenArr?.filter(item => item.is_open === 1).map(i => i.id + '')}
                    arrow={active => (active ? <MinusOutline /> : <AddOutline />)}
                  >
                    {imgs.sku_content?.map((item) => ( 
                        <Collapse.Panel key={item.id + ''} title={item.title}>
                          <div className="info-box">
                            <div dangerouslySetInnerHTML={{ __html: item.content }} className="info" />
                          </div>
                        </Collapse.Panel>
                      ))}
                    
                  </Collapse>
                </div>
                {/* 4.相关产品 */}
                <div className='Product-related'>
                  {relateProducts.length ? 
                    <div >
                      <h2 className='related-title'>Related Products</h2>
                      <Swiper autoplay slideSize={100}>
                        {relateProducts.map((item,index) => (
                            <Swiper.Item key={index}>
                              <Image lazy src={item.default_image} alt={item.alt}  fit='cover' className='img' />
                            </Swiper.Item>
                            ))}
                      </Swiper>
                    </div>
                    : ''
                  }

                </div>
                
              </div>
              
            </div>
            <Form />
          </div>
        )}

      </div>
    )
  }
  
  export default Product
  